<template>
  <a-card :bordered="false" class="card-area">
    <!-- 查询区域 11111-->
    <div class="table-page-search-wrapper">
      <a-form layout="inline" :label-col="labelCol" @keyup.enter.native="searchQuery">
        <a-row :gutter="24">
          <a-col :md="6" :sm="8">
            <a-form-item label="会员名称/id">
              <a-input placeholder="请输入会员名称" v-model="queryParam.memberName"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="订单号">
              <a-input placeholder="请输入订单号" v-model="queryParam.orderNo"></a-input>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="订单状态">
              <a-select v-model="queryParam.orderStatus" placeholder="请选择订单状态">
                <a-select-option value="">全部订单</a-select-option>
                <a-select-option value="1">未付款</a-select-option>
                <a-select-option value="2">进行中</a-select-option>
                <a-select-option value="3">已取消</a-select-option>
                <a-select-option value="4">已完成</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :md="6" :sm="8">
            <a-form-item label="支付状态">
              <a-select v-model="queryParam.payStatus" placeholder="请选择订支付状态">
                <a-select-option value="">全部订单</a-select-option>
                <a-select-option value="1">待支付</a-select-option>
                <a-select-option value="2">支付中</a-select-option>
                <a-select-option value="3">支付成功</a-select-option>
                <a-select-option value="4">支付失败</a-select-option>
                <a-select-option value="5">等待退款</a-select-option>
                <a-select-option value="6">退款中</a-select-option>
                <a-select-option value="7">退款成功</a-select-option>
                <a-select-option value="8">退款失败</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
           <a-col :md="6" :sm="24">
               <a-button type="primary" @click="searchQuery" icon="search">查询</a-button>
               <a-button type="primary" @click="searchReset" icon="reload" style="margin-left: 8px">重置</a-button>
           </a-col>
        </span>
        </a-row>
      </a-form>
    </div>

    <!-- 操作按钮区域 -->
    <div class="table-operator">

    </div>

    <!-- table区域-begin -->
    <div>

      <a-table
        ref="table"
        size="middle"
        bordered
        rowKey="id"
        :columns="columns"
        :dataSource="dataSource"
        :pagination="ipagination"
        :loading="loading"
        :scroll="{ x: 1200 }"
        @change="handleTableChange">

        <span slot="action" slot-scope="text, record">
          <a @click="handleEdit(record)">详情</a>
          <a-divider type="vertical" v-if="record.orderStatus=='1'"/>
          <a @click="postSubmit(record.id,'是否确认订单信息?','/store/order/sure')" v-if="record.orderStatus=='1'">商家确认</a>
          <a-divider type="vertical" v-if="record.orderStatus=='2'"/>
          <a @click="handleDelivery(record)" v-if="record.orderStatus=='2'">确认发货</a>
          <a-divider type="vertical" v-if="record.orderStatus=='3'"/>

           <a @click="postSubmit(record.id,'是否确认客户已收货?','/store/order/finish')" v-if="record.orderStatus=='3'">已收货</a>
           <a-divider type="vertical" v-if="record.orderStatus=='3'||record.orderStatus=='8'"/>
           <a @click="handleEdit(record)" v-if="record.orderStatus=='3'||record.orderStatus=='8'">退款</a>
        </span>

        <a-table
          slot="expandedRowRender"
          slot-scope="record"
          :columns="innerColumns"
          :pagination="false"
          :data-source="record.items"
          style="margin: 10px"
        >
          <template slot="imgSlot" slot-scope="text">
            <span v-if="!text" style="font-size: 12px;font-style: italic;">无图片</span>
            <img v-else :src="getImgView(text)" height="25px" alt=""
                 style="max-width:80px;font-size: 12px;font-style: italic;" />
          </template>

          <template slot="goodsType" slot-scope="text">
            <span v-if="text=='1'" style="font-size: 12px;font-style: italic;">食谱方案</span>
            <span v-if="text=='2'" style="font-size: 12px;font-style: italic;">运动方案</span>
            <span v-if="text=='3'" style="font-size: 12px;font-style: italic;">整套方案</span>
          </template>
        </a-table>
      </a-table>
    </div>
    <!-- table区域-end -->
    <store-order-modal ref="modalForm"></store-order-modal>
    <store-order-delivery-modal ref="modalDelivery"  @ok="modalFormOk"></store-order-delivery-modal>
  </a-card>
</template>
<script>
import '@/assets/less/TableExpand.less'
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { putAction, getAction, postAction } from '@/api/manage'
import { frozenBatch } from '@/api/api'
import StoreOrderModal from './modules/StoreOrderModal'
import StoreOrderDeliveryModal from './modules/StoreOrderDeliveryModal'

export default {
  name: 'ord_store_orderList',
  mixins: [JeecgListMixin],
  components: {
    StoreOrderModal,
    StoreOrderDeliveryModal
  },
  data() {
    return {
      description: '平台订单记录表管理页面',
      labelCol: { style: { width: '110px' } },
      queryParam: {
        orderStatus: '',
        orderNo: ''
      },
      innerColumns: [
        {
          title: '分类',
          dataIndex: 'goodsType',
          key: 'goodsType',
          width: 160,
          scopedSlots: { customRender: 'goodsType' }
        },
        { title: '图片', dataIndex: 'goodsImg', key: 'goodsImg', width: 120, scopedSlots: { customRender: 'imgSlot' } },
        { title: '商品', dataIndex: 'goodsName', key: 'goodsName', width: 160 },
        { title: '数量', dataIndex: 'totalNum', key: 'totalNum', width: 130 },
        { title: '单价', dataIndex: 'goodsPrice', key: 'goodsPrice', width: 130 },
        { title: '总价', dataIndex: 'totalPayPrice', key: 'totalPayPrice', width: 130 }
      ],
      // 表头
      columns: [
        {
          title: '订单号',
          align: 'center',
          dataIndex: 'orderNo',
          width: 250
        },
        {
          title: '下单时间',
          align: 'center',
          dataIndex: 'orderTime',
          width: 160
        },
        {
          title: '总金额',
          align: 'center',
          dataIndex: 'originalPrice',
          width: 130
        },
        {
          title: '实付金额',
          align: 'center',
          dataIndex: 'consumeAmount',
          width: 130
        },
        {
          title: '支付方式',
          align: 'center',
          dataIndex: 'payType',
          width: 110,
          customRender: function(t, r, index) {
            if (t == '1') {
              return '现金'
            } else if (t == '2') {
              return '微信'
            }
            return ''
          }
        },
        {
          title: '支付状态',
          align: 'center',
          dataIndex: 'payStatus_dictText',
          width: 130
        },
        {
          title: '付款完成时间',
          align: 'center',
          dataIndex: 'payFinishTime',
          width: 130
        },
        {
          title: '订单状态',
          align: 'center',
          dataIndex: 'orderStatus',
          width: 130,
          customRender: function(t, r, index) {
            //订单状态  0待支付 1等商家接单 2商家已接单 3进行中 4已完成 5已退单
            if (t == '0') {
              return '待支付'
            } else if (t == '1') {
              return '待确认'
            } else if (t == '2') {
              return '已确认'
            }else if (t == '3') {
              return '进行中'
            }else if (t == '4') {
              return '已完成'
            }
            return '已退单'
          }
        },
        {
          title: '配送状态',
          align: 'center',
          dataIndex: 'deliveryStatus',
          width: 120,
          customRender: function(t, r, index) {
            //订单状态  0待支付 1等商家接单 2商家已接单 3进行中 4已完成 5已退单
            if (t == '1') {
              return '未发货'
            }
            return '已发货'
          }
        },
        {
          title: '订单类型',
          align: 'center',
          dataIndex: 'orderType',
          customRender: function(t, r, index) {
            if (t == '1') {
              return '一体机订单'
            } else if (t == '2') {
              return '商城'
            }
            return '未知'
          },
          width: 130
        },
        {
          title: '会员',
          align: 'center',
          dataIndex: 'memberName',
          width: 130
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          width: 180,
          scopedSlots: { customRender: 'action' }
        }
      ],
      url: {
        list: '/store/order/evaluation/list'
      }
    }
  },
  computed: {
    importExcelUrl: function() {
      return `${window._CONFIG['domianURL']}/${this.url.importExcelUrl}`
    }
  },
  methods: {
    handleDelivery: function (record) {
      this.$refs.modalDelivery.edit(record);
      this.$refs.modalDelivery.title = "查看";
      this.$refs.modalDelivery.disableSubmit = false;
    },
  }
}
</script>
<style scoped>
@import '~@assets/less/common.less';
</style>
